<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue-2.6.12.js"> </script>
    <script type="text/javascript" src="../js/vue-router-3.4.9.js"> </script>
    <script type="text/javascript" src="../js/myajax.js"></script>
    <script type="text/javascript" src="../js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/food/show"><button>查询</button></router-link>
        <router-link to="/food/add"><button>添加</button></router-link>

        <hr>
        <router-view></router-view>
    </div>
    <template id="food-table">
        <div>
            <table border="1">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>食物名</th>
                    <th>价格</th>
                    <th>描述</th>
                    <th>热量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tr v-for="food in list" :key="food.foodId">
                    <td>{{food.foodId}}</td>
                    <td>{{food.foodName}}</td>
                    <td>{{food.foodPrice}}</td>
                    <td>{{food.foodDesc}}</td>
                    <td>{{food.foodCalorie}}</td>
                    <td>
                        <button @click="deleteFood(food.foodId)">删除</button>
                        <router-link :to="{path:'/food/update',query:{id:food.foodId}}"><button>更新</button></router-link>

                    </td>
                </tr>
            </table>
            <p>
                <a href=""v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                    <button style="margin: 0 10px">{{page}}</button>
                </a>
            </p>
        </div>
    </template>
    <template id="add-form">
        <div>
            <form action="" @submit.prevent="addOne">
                食物名：<input type="text" v-model="f.foodName"><br>
                价格：<input type="text" v-model="f.foodPrice"><br>
                描述：<input type="text" v-model="f.foodDesc"><br>
                热量：<input type="text" v-model="f.foodCalorie"><br>
                <input type="submit" value="添加">
            </form>
        </div>
    </template>
    <template id="update-form">
        <div>
            <form action="" @submit.prevent="updateOne">
                编号：<input type="text" v-model="f.foodId" readonly="readonly"><br>
                食物名：<input type="text" v-model="f.foodName"><br>
                价格：<input type="text" v-model="f.foodPrice"><br>
                描述：<input type="text" v-model="f.foodDesc"><br>
                热量：<input type="text" v-model="f.foodCalorie"><br>
                <input type="submit" value="更新">
            </form>
        </div>
    </template>
    <script>

        const updateForm = {
            template:"#update-form",
            data(){
                return {
                    f:{}
                }
            },
            created(){
                axios.get("/food-web/food/showOne",{
                    params:{
                        id:this.$route.query.id
                    }
                }).then(resp=>{
                    let data = resp.data;
                    console.log(data);
                    this.f = data;
                    console.log(this.f);
                }).catch(err=>{
                    console.log(err);
                })
            },
            methods:{
                updateOne(){
                    axios.post("/food-web/food/updateOne",Qs.stringify({food:this.f},{allowDots:true})).then(
                        resp=>{
                            let data =resp.data;
                            if(data.status == "success"){
                                alert("更新成功");
                                this.$router.push("/food/show");
                            }else{
                                alert("更新失败");
                            }
                    })
                }
            }
        }
        const addForm = {
            template: "#add-form",
            data(){
                return {
                    f:{}
                }
            },
            methods: {
                addOne(){
                    axios.post("/food-web/food/addOne",Qs.stringify({food:this.f},{allowDots:true})).then(resp=>{
                        if(resp.data.status == "success"){
                            alert("添加成功");
                            this.$router.push("/food/show");
                        }else{
                            alert("添加失败");
                        }
                    })
                }
            }
        }
        const foodTable = {
            template:"#food-table",
            data(){
                return{
                    list:[],
                    pages:[]
                }
            },
            created: function () {
                this.handleAClick(1);
            },
            methods:{
                handleAClick(i){
                    axios.get("/food-web/food/show",{
                        params:{
                            pageNum:i,
                            pageSize:5
                        }
                    }).then(resp=>{
                        let data = resp.data;
                        this.list = data.list;
                        this.pages = data.pages;
                    })
                },
                deleteFood(i){
                    let isDelete = confirm("确定删除吗?");
                    if(!isDelete){
                        return ;
                    }
                    axios.get("/food-web/food/deleteOne",{
                        params:{
                            id:i
                        }
                    }).then(resp=>{
                        let responseData = resp.data;
                        console.log(responseData);
                        if(responseData.status == "success"){
                            alert("删除成功");
                            this.handleAClick(1);
                        }else{
                            alert("删除失败");
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }
            }
        }
        const router = new VueRouter({
            routes:[
                {path:"/",redirect:"/food/show"},
                {path:"/food/show",component:foodTable},
                {path:"/food/add",component:addForm},
                {path:"/food/update",component: updateForm }
            ]
        })
        new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>